<template>
	<view class="privacy" v-if="showPrivacy">
		<view class="content">
			<view class="title">隐私保护指引</view>
			<view class="des">
				在使用当前小程序服务之前，请仔细阅读
				<text class="link" @click="openPrivacyContract">{{ privacyContractName }}</text>
				。如果你同意{{ privacyContractName }}，请点击“同意”开始使用。
			</view>
			<view class="btns">
				<button class="item reject" @click="exitMiniProgram">拒绝</button>
				<view>
					<button id="agree-btn" class="item agree" open-type="getPhoneNumber|agreePrivacyAuthorization"
						@agreeprivacyauthorization="handleAgreePrivacyAuthorization" @getphonenumber="getPhoneNumber"
						@tap="handleGetUserInfo">同意</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import
	configs
	from '@/config/index.js'
	import {
		toast
	} from '../utils/common';
	import {
		getPhoneNum,
		getWxUser
	} from '@/api/index'
	export default {
		props: {
			code: {
				type: String,
			},
			session_key: {
				type: String
			}
		},
		data() {
			return {
				privacyContractName: '', //需要弹窗展示的隐私协议名称
				showPrivacy: false, //全局控制弹窗显隐,
				userInfo: {},
			};
		},
		onShow() {
			console.log(this.code)
		},
		methods: {
			getPrivacySet(e) {
				// wx.requirePrivacyAuthorize({
				// 	success: () => {
				// 		// 用户同意授权
				// 		// 继续小程序逻辑
				// 	},
				// 	fail: () => {}, // 用户拒绝授权
				// 	complete: () => {}
				// })
				let that = this;
				wx.onNeedPrivacyAuthorization(resolve => {
					that.showPrivacy = true;
					that.resolvePrivacyAuthorization = resolve
				})
				uni.getPrivacySetting({
					success(res) {
						if (res.needAuthorization || e) {
							that.showPrivacy = true;
							that.privacyContractName = res.privacyContractName;
						} else that.showPrivacy = false;
						uni.setStorageSync('showPrivacy', res.needAuthorization ? '1' : '0')
					}
				});
			},
			handleGetUserInfo() {
				uni.getUserProfile({
					desc: '展示用户信息',
					success: (res) => {
						console.log(res);
						if (res.errMsg === 'getUserProfile:ok') {
							this.userInfo = res.userInfo
						}
					},
					fail(err) {
						toast(err.errMsg)
					}
				})
			},
			//获取手机号
			getPhoneNumber(e) {
				if (e.detail.errMsg === 'getPhoneNumber:ok') {
					getPhoneNum({
						phoneCode: e.detail.code,
						code: this.code,
					}).then(res => {
						if (res.phoneNumber) {
							this.userInfo.phoneNum = res.phoneNumber
							uni.reLaunch({
								url: '../index/index?userInfo=' + JSON.stringify(this
									.userInfo)
							})
						}
					})
					return
				}
				toast('用户拒绝获取手机号')
			},
			// 同意隐私协议
			handleAgreePrivacyAuthorization() {
				const that = this;
				wx.requirePrivacyAuthorize({
					success: res => {
						that.resolvePrivacyAuthorization({
							buttonId: 'agree-btn',
							event: 'agree'
						})
						that.showPrivacy = false;
						uni.setStorageSync('showPrivacy', '0')
					}
				});
			},
			// 拒绝隐私协议
			exitMiniProgram() {
				const that = this;
				uni.showModal({
					content: '如果拒绝,我们将无法获取您的信息, 包括手机号、位置信息、相册等该小程序十分重要的功能,您确定要拒绝吗?',
					success: res => {
						if (res.confirm) {
							that.showPrivacy = false;
							uni.exitMiniProgram({
								success: () => {
									console.log('退出小程序成功');
								}
							});
						}
					}
				});
			},
			// 跳转协议页面  
			// 点击高亮的名字会自动跳转页面 微信封装好的不用操作
			openPrivacyContract() {
				wx.openPrivacyContract({
					fail: () => {
						uni.showToast({
							title: '网络错误',
							icon: 'error'
						});
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.privacy {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9999999;
		display: flex;
		align-items: center;
		justify-content: center;

		.content {
			width: 85vw;
			padding: 50rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 16rpx;

			.title {
				text-align: center;
				color: #333;
				font-weight: bold;
				font-size: 34rpx;
			}

			.des {
				font-size: 26rpx;
				color: #666;
				margin-top: 40rpx;
				text-align: justify;
				line-height: 1.6;

				.link {
					color: #07c160;
					text-decoration: underline;
				}
			}

			.btns {
				margin-top: 60rpx;
				display: flex;
				justify-content: space-between;

				.item {
					justify-content: space-between;
					width: 244rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 16rpx;
					box-sizing: border-box;
					border: none;
				}

				.reject {
					background: #f4f4f5;
					color: #909399;
				}

				.agree {
					background: #07c160;
					color: #fff;
				}
			}
		}
	}
</style>